<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.79.1/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.79.1/Build/Cesium/Widgets/widgets.css"
        rel="stylesheet">
</head>

<body>
    <div id="fun">
        <button id="fov1">fov++</button>
        <button id="fov2">fov--</button>
        <button id="aspectRatio1">aspectRatio++</button>
        <button id="aspectRatio2">aspectRatio--</button>
        <button id="near1">near++</button>
        <button id="near2">near--</button>
        <button id="far1">far++</button>
        <button id="far2">far--</button>
        <button id="xOffset1">xOffset++</button>
        <button id="xOffset2">xOffset--</button>
        <button id="yOffset1">yOffset++</button>
        <button id="yOffset2">yOffset--</button>
    </div>
    <div id="cesiumContainer">
    </div>
</body>
<style>
    @import url(../Source/Widgets/widgets.css);

    html,
    body,
    #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    #fun {
        position: absolute;
        z-index: 100;
    }
</style>
<script type="module">
    let viewer = new Cesium.Viewer("cesiumContainer", {
        selectionIndicator: false,
        animation: false, //是否显示动画控件
        baseLayerPicker: false, //是否显示图层选择控件
        geocoder: false, //是否显示地名查找控件
        timeline: false, //是否显示时间线控件
        sceneModePicker: true, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        infoBox: false, //是否显示点击要素之后显示的信息
        fullscreenButton: true,
        terrainProvider: Cesium.createWorldTerrain()
    });
    let primitive;
    let fov = 0, aspectRatio = 0, near = 0, far = 0, xOffset = 0, yOffset = 0;
    change()
    viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(108.95941920299897, 34.21978815691976, 1200) });

    document.getElementById("fov1").addEventListener("click", () => {
        fov = fov + 0.1;
        change();
    });
    document.getElementById("fov2").addEventListener("click", () => {
        fov = fov - 0.1;
        change();
    });
    document.getElementById("aspectRatio1").addEventListener("click", () => {
        aspectRatio = aspectRatio + 0.1;
        change();
    });
    document.getElementById("aspectRatio2").addEventListener("click", () => {
        aspectRatio = aspectRatio - 0.1;
        change();
    });
    document.getElementById("near1").addEventListener("click", () => {
        near = near + 0.1;
        change();
    });
    document.getElementById("near2").addEventListener("click", () => {
        if (near > 0)
            near = near - 0.1;
        change();
    });
    document.getElementById("far1").addEventListener("click", () => {
        far = far + 10;
        change();
    });
    document.getElementById("far2").addEventListener("click", () => {
        if (far > 0)
            far = far - 10;
        change();
    });
    document.getElementById("xOffset1").addEventListener("click", () => {
        xOffset = xOffset + 1;
        change();
    });
    document.getElementById("xOffset2").addEventListener("click", () => {
        xOffset = xOffset - 1;
        change();
    });
    document.getElementById("yOffset1").addEventListener("click", () => {
        yOffset = yOffset + 1;
        change();
    });
    document.getElementById("yOffset2").addEventListener("click", () => {
        yOffset = yOffset - 1;
        change();
    });


    function change() {
        primitive && viewer.scene.primitives.remove(primitive);
        let geometry = new Cesium.FrustumGeometry({
            frustum: new Cesium.PerspectiveFrustum({
                fov: Math.PI / 6 + fov,
                aspectRatio: 1 + aspectRatio,
                near: 1.0 + near,
                far: 300.0 + far,
                xOffset: xOffset,
                yOffset: yOffset
            }),
            origin: Cesium.Cartesian3.fromDegrees(108.95941920299897, 34.21978815691976, 1000),
            orientation: new Cesium.Quaternion(0.0001, 0.0, 0.0, 0.0)
        });
        primitive = new Cesium.Primitive({
            geometryInstances: new Cesium.GeometryInstance({
                geometry: geometry
            }),
            appearance: new Cesium.EllipsoidSurfaceAppearance({
                aboveGround: true,
                material: Cesium.Material.fromType('Checkerboard')
            }),
            show: true,
            asynchronous: false
        });
        viewer.scene.primitives.add(primitive);
    }

    //Cesium 笛卡尔 xyz轴方向
    viewer.entities.add({
        polyline: new Cesium.PolylineGraphics({
            positions: [new Cesium.Cartesian3(0, 0, 1), new Cesium.Cartesian3(7000000, 0, 1)],
            material: Cesium.Color.RED
        })
    });
    viewer.entities.add({
        polyline: new Cesium.PolylineGraphics({
            positions: [new Cesium.Cartesian3(0, 0, 1), new Cesium.Cartesian3(0, 7000000, 1)],
            material: Cesium.Color.BLUE
        })
    });
    viewer.entities.add({
        polyline: new Cesium.PolylineGraphics({
            positions: [new Cesium.Cartesian3(0, 0, 1), new Cesium.Cartesian3(0, 0, 7000000)],
            material: Cesium.Color.GREEN
        })
    });
</script>